<template>
  <div class="wrap">
    <div class="mesg-wrap">
      <div class="icon">
        <img :src="form.avatar" alt="" srcset="" />
      </div>
      <div class="mesg">
        <div class="mesg-item">姓名：{{ form.name }}</div>
        <div class="mesg-item">用户名：{{ form.username }}</div>
        <div class="mesg-item">手机号：{{ form.phone }}</div>
        <div class="mesg-item">邮箱：{{ form.email }}</div>
      </div>
    </div>

    <div class="cut"></div>

    <div class="modify">
      <h2>修改信息</h2>
      <div class="login-content" v-loading="sinUpLoading">
        <el-form
          ref="form"
          :model="form"
          label-width="0px"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
        >
          <div class="login-content-wrap">
            <el-row :gutter="10">
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }">
                <el-form-item prop="phone" label="">
                  <el-input
                    v-model="form.newphone"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="login-content-wrap">
            <el-row :gutter="10">
              <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }">
                <el-form-item prop="email" label="">
                  <el-input
                    v-model="form.email"
                    placeholder="请输入邮箱"
                  ></el-input>
                </el-form-item>
              </el-col>
             
            </el-row>
          </div>


            <div class="login-content-wrap">
                <el-row :gutter="10">
                    <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }">
                        <el-form-item prop="code" label="">
                          <el-input
                            v-model="form.code"
                            placeholder="请输入验证码"
                          ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
          <div class="login-btn">
            <button
              type="button"
              :disabled="isGetCode"
              v-loading="codeLoading"
              @click="getCode"
            >
              获取验证码
            </button>
            <button
              type="button"
              :disabled="isSinUp"
              @click="toReViseUser('form')"
            >
              提 交
            </button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { reviseUser, getEmailCode } from "../http/api";
export default {
  data() {
    var validateName = (rule, value, callback) => {
      var CellPoe = /^[a-zA-Z\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      if (value === "") {
        callback(new Error("该信息不能为空"));
      } else if (!CellPoe.test(value)) {
        callback(new Error("格式填写错误！只能包含中文和英文"));
      } else {
        callback();
      }
    };
    var validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("用户名不能为空"));
      } else if (value.length > 10) {
        callback(new Error("用户名不能超过10位"));
      } else {
        callback();
      }
    };
    return {
      form: {
        name: "",
        username: "",
        email: "",
        phone:"",
        code: "",
      },
      siteinfo:{},
      codeLoading: false,
      isGetCode: false,
      sinUpLoading: false,
      isSinUp: false,
      rules: {
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        name: [{ validator: validateName, trigger: "blur" }],
        username: [{ validator: validateUsername, trigger: "blur" }],
        code: [
          {
            required: true,
            message: "请输入邮箱验证码",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
   metaInfo() {
    return {
      title: this.siteinfo.name,
      meta: [
        {
          vmid: "description",
          name: "description",
          content: this.siteinfo.descript,
        },
         {
          vmid: "keyword",
          name: "keyword",
          content: this.siteinfo.keyword,
        },
      ],
    };
  },
  mounted() {
    this.getLocalStorage();
  },
  methods: {
    getLocalStorage() {
      var userinfo = localStorage.getItem("userinfo");
      userinfo = JSON.parse(userinfo);
      this.form.name = userinfo.name;
      this.form.email = userinfo.email;
      this.form.username = userinfo.username;
      this.form.phone = userinfo.phone;
      this.form.avatar = userinfo.avatar;
    },
    getCode() {
      if (this.form.email) {
        this.codeLoading = true;
        this.isGetCode = true;
        getEmailCode(this.form.email).then((res) => {
          this.codeLoading = false;
          this.isGetCode = false;
          if (res && res.data && res.data.code == 20000) {
            const { data } = res;
            Message.success(data.message);
          }
        });
      } else {
        Message.error("邮箱不为空！");
      }
    },
    toReViseUser(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.sinUpLoading = true;
          this.isSinUp = true;
          reviseUser(this.form).then((res) => {
            this.sinUpLoading = false;
            this.isSinUp = false;
            if (res && res.data && res.data.code == 20000) {
              const { data } = res.data;
              var userinfo = JSON.parse( localStorage.getItem("userinfo"))
              userinfo.phone = this.form.newphone;
              userinfo.email = this.form.email;
              localStorage.setItem("userinfo", JSON.stringify(userinfo));
              this.setProfile(data.name, data.email, data.username);
              getLocalStorage();
            }
          });
        } else {
          return false;
        }
      });
    },
    setProfile(name, email, username) {
      localStorage.setItem("name", name);
      localStorage.setItem("email", email);
      localStorage.setItem("username", username);
      Message.success("修改成功！");
    
    },
  },
};
</script>

<style lang="less" scope>
.wrap {
  // width: 100%;
  // padding-top: 20px;
}

.mesg-wrap {
  padding-top: 20px;

  width: 100%;
  display: flex;
  align-items: center;
  .icon {
    height: 144px;
    width: 144px;
    border-radius: 77px;
    background-color: rgb(212, 212, 212);
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 108px;
      color: rgb(158, 156, 156);
    }
    img {
        height: 144px;
        width: 144px;
        border-radius: 77px;
    }
  }
  .mesg {
    flex: 1;
    // background-color: #ff0;
    margin-left: 40px;
    letter-spacing: 1px;
    .mesg-item {
      margin-top: 10px;
    }
  }
}

.cut {
  height: 1px;
  width: 100%;
  background-color: #666;
  margin: 20px 0;
}

.modify {
  h2 {
    font-size: 18px;
    margin: 40px 0;
    padding-bottom: 25px;
    font-weight: 500;
    border-bottom: 0;
  }
  .login-content {
    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 0px;
      border: 0px solid #989898;
      border-bottom: 1px solid #989898;
      box-sizing: border-box;
      color: #989898;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }
  .login-content-wrap {
    width: 100%;
    .el-form-item {
      // width: 400px;
      // margin-right: 100px;
    }
  }
  .login-btn {
    button {
      background: #4d4d4d;
      font-size: 18px;
      padding: 3px 20px;
      color: #fff;
      border: 0 none;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      margin-right: 10px;
    }
    button:hover {
      background-color: #f00;
    }
  }
}
</style>